{extend name="common" /}

{block name="title"}
注册 - layuiAdmin
{/block}

{block name="css"}
<link rel="stylesheet" href="__layuiadmin__/style/login.css" media="all">
{/block}

{block name="content"}
<div class="layadmin-user-login layadmin-user-display-show" id="LAY-user-login" style="display: none;">
  <div class="layadmin-user-login-main">
    <div class="layadmin-user-login-box layadmin-user-login-header">
      <h2>layuiAdmin</h2>
      <p>layui 官方出品的单页面后台管理模板系统</p>
    </div>
    <div class="layadmin-user-login-box layadmin-user-login-body layui-form">
      <!--      <div class="layui-form-item">-->
      <!--        <label class="layadmin-user-login-icon layui-icon layui-icon-cellphone" for="LAY-user-login-cellphone"></label>-->
      <!--        <input type="text" name="cellphone" id="LAY-user-login-cellphone" lay-verify="phone" placeholder="手机"-->
      <!--               class="layui-input">-->
      <!--      </div>-->
      <!--      <div class="layui-form-item">-->
      <!--        <div class="layui-row">-->
      <!--          <div class="layui-col-xs7">-->
      <!--            <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>-->
      <!--            <input type="text" name="vercode" id="LAY-user-login-vercode" lay-verify="required" placeholder="验证码"-->
      <!--                   class="layui-input">-->
      <!--          </div>-->
      <!--          <div class="layui-col-xs5">-->
      <!--            <div style="margin-left: 10px;">-->
      <!--              <button type="button" class="layui-btn layui-btn-primary layui-btn-fluid" id="LAY-user-getsmscode">获取验证码-->
      <!--              </button>-->
      <!--            </div>-->
      <!--          </div>-->
      <!--        </div>-->
      <!--      </div>-->
      <div class="layui-form-item">
        <label class="layadmin-user-login-icon layui-icon layui-icon-user" for="LAY-user-login-account"></label>
        <input type="text" name="account" id="LAY-user-login-account" lay-verify="account" placeholder="用户名"
               class="layui-input">
      </div>
      <div class="layui-form-item">
        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-password"></label>
        <input type="password" name="password" id="LAY-user-login-password" lay-verify="pass" placeholder="密码"
               class="layui-input">
      </div>
      <div class="layui-form-item">
        <label class="layadmin-user-login-icon layui-icon layui-icon-password" for="LAY-user-login-repass"></label>
        <input type="password" name="repass" id="LAY-user-login-repass" lay-verify="required" placeholder="确认密码"
               class="layui-input">
      </div>
      <div class="layui-form-item">
        <label class="layadmin-user-login-icon layui-icon layui-icon-username" for="LAY-user-login-nickname"></label>
        <input type="text" name="nickname" id="LAY-user-login-nickname" lay-verify="nickname" placeholder="昵称"
               class="layui-input">
      </div>
      <div class="layui-form-item">
        <div class="layui-row">
          <div class="layui-col-xs7">
            <label class="layadmin-user-login-icon layui-icon layui-icon-vercode" for="LAY-user-login-vercode"></label>
            <input type="text" name="captcha" id="LAY-user-login-vercode" lay-verify="required" placeholder="图形验证码"
                   class="layui-input">
          </div>
          <div class="layui-col-xs5">
            <div style="margin-left: 10px;">
              <img src="{:captcha_src()}" class="layadmin-user-login-codeimg" id="captcha">
            </div>
          </div>
        </div>
      </div>
      <div class="layui-form-item">
        <input type="checkbox" name="agreement" lay-skin="primary" title="同意用户协议" checked>
      </div>
      <div class="layui-form-item">
        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="*">注 册</button>
      </div>
      <div class="layui-trans layui-form-item layadmin-user-login-other">
        <label>社交账号注册</label>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-qq"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-wechat"></i></a>
        <a href="javascript:;"><i class="layui-icon layui-icon-login-weibo"></i></a>

        <a href="{:url('login/signIn')}" class="layadmin-user-jump-change layadmin-link layui-hide-xs">用已有帐号登入</a>
        <a href="{:url('login/signIn')}"
           class="layadmin-user-jump-change layadmin-link layui-hide-sm layui-show-xs-inline-block">登入</a>
      </div>
    </div>
  </div>

  <div class="layui-trans layadmin-user-login-footer">

    <p>© 2018 <a href="http://www.layui.com/" target="_blank">layui.com</a></p>
    <p>
      <span><a href="http://www.layui.com/admin/#get" target="_blank">获取授权</a></span>
      <span><a href="http://www.layui.com/admin/pro/" target="_blank">在线演示</a></span>
      <span><a href="http://www.layui.com/admin/" target="_blank">前往官网</a></span>
    </p>
  </div>

</div>
{/block}

{block name="js"}
<script>
    layui.use(['form', 'toolkit','jquery'], function () {
        var $ = layui.jquery,
            toolkit = layui.toolkit,
            form = layui.form;

        function changeCaptcha() {
            $('#captcha').attr('src', "/captcha.html?t=" + (new Date).getTime());
        }

        $(document).on('click', '#captcha', function () {
            changeCaptcha();
        });

        //提交
        form.on('submit(*)', function (obj) {
            var field = obj.field;

            //确认密码
            if (field.password !== field.repass) {
                return toolkit.msg.error('两次密码输入不一致');
            }

            //是否同意用户协议
            if (!field.agreement) {
                return toolkit.msg.error('你必须同意用户协议才能注册');
            }

            toolkit.request.post({
                url: '/login/signUp',
                data: field,
            }, function (res) {
                toolkit.msg.success('注册成功', function () {
                    window.location.href = '/login/signIn';
                });
            }, function (res) {
                toolkit.msg.error(res.msg);
                changeCaptcha();
            })

            return false;
        });
    });
</script>
{/block}
